<template>
  <div class="cbox">
    <h3>{{msgFromParent}}</h3>
    <h3>{{count}}</h3>
    <button @click="sendMsg">send</button>
  </div>
</template>

<script lang='ts' setup>
import {defineProps,ref,defineEmits} from 'vue'
/*
   在子组件中使用defineProps来定义父组件向子组件传递数据的名称
   defineProps<{参数名:参数的类型}>()
*/
let count=ref<number>(20)
defineProps<{msgFromParent:string}>()
let emit=defineEmits<{(e:'make',val:number):void}>()
const sendMsg:()=>void=()=>{
    emit('make',count.value)
}
</script>
<style lang='scss' scoped>
.cbox{
    width: 200px;
    height: 100px;
    background-color: springgreen;
}
</style>